<template>
    <div id="s-d">
        <el-col :span="24" >
            <div class="s-pt">
                <span class="s-pt-sp">权限管理</span>
                <span class="s-s2"></span>
                <span class="s-pt-exit">退出</span>
            </div>
            <button class="s-pt-btn" @click="centerDialogVisible = true">新建权限</button>
            <div class="s-con">
                <!--斑马纹表格-->
                <el-table
                        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="权限ID"
                            width="225">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="权限名称"
                            width="225">
                    </el-table-column>
                    <!--<el-table-column
                            prop="type"
                            label="权限性质"
                            width="180">
                    </el-table-column>-->
                    <el-table-column
                            prop="describe"
                            label="权限描述"
                            width="225">
                    </el-table-column>
                    <el-table-column
                            prop="operation"
                            label="操作"
                            width="225">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="powerDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--页码-->
                <el-pagination
                        background
                        @current-change="current_change"
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pagesize">
                </el-pagination>
            </div>
            <!--新建弹框-->
            <el-dialog
                    title="新建权限"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                <hr/>
                <p class="s-pt-p">
                    <span class="s-p1-sp">权限名称：</span>
                    <input class="s-p-in" v-model="from.name"/>
                </p>
                <!--<p class="s-pt-p" >
                    <span class="s-p1-sp">权限性质：</span>
                    <template>
                        <el-radio v-model="from.radio" label="1">操作权限</el-radio>
                        <el-radio v-model="from.radio" label="2">基本权限</el-radio>
                    </template>
                </p>-->
                <p class="s-pt-p">
                    <span class="s-p1-sp">权限描述：</span>
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="from.textarea">
                    </el-input>
                </p>

                <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addpower">确 定</el-button>
  </span>
            </el-dialog>
        </el-col>
    </div>
</template>

<script>
export default {
    inject:['reload'],
    data(){
        return {
            pagesize:6,
            currentPage:1,
            total:0,
            tableData: [],
            centerDialogVisible: false,
            from:{
              name:'',
              textarea: '',
            },
        }
    },
    methods:{
        //页码
        current_change:function(currentPage){
            this.currentPage = currentPage;
        },
        //删除权限
        powerDelete(index, row){
            this.$axios({
                url:'/api/deletePower',
                method:'post',
                data:{
                    id:row.id,
                }
            }).then((res)=>{
                this.reload();
                alert(res.data.msg)
            });
        },
        //添加权限
        addpower(){

           this.centerDialogVisible = false;
            this.$axios({
                url:'/api/addPower',
                method:'post',
                data:{
                    name:this.from.name,
                    textarea:this.from.textarea,
                }
            }).then((res)=>{
                if (res.data.error==0){
                    this.reload();
                    alert('添加成功')
                }

            })
        },
    },
    updated:function(){
        //页码
        this.total=this.tableData.length;
    },
    mounted:function () {
        this.$axios({
            url:'/api/powerCon',
            method:'post',
            data:{

            }
        }).then((res)=>{
            for (let i = 0; i < res.data.length; i++) {
                let arr = {
                    id: res.data[i].j_id,
                    name: res.data[i].j_name,
                    type: res.data[i].j_type === 1? ('操作权限'):('基本权限'),
                    describe:res.data[i].j_describe,

                };
                this.tableData.push(arr);
            }
        })
    }
}
</script>

<style lang="less">
    #s-d{
        width: 100%;
        height: 100%;
        background: #f0f0f8;
        .s-pt{
            width: 100%;
            height: 60px;
            background: white;
            text-align: left;
            .s-pt-sp{
                line-height: 60px;
                margin-left: 50px;
                font-size: 18px;
            }
            .s-s2{
                display: inline-block;
                width: 750px;
            }
            .s-pt-exit{
                display: inline-block;
                text-align: center;
                border: none;
                margin-left:10px;
                cursor: default;
            }
        }
        .s-pt-btn{
            width: 100px;
            height: 30px;
            cursor: pointer;
            margin-left: -800px;
            margin-top: 20px;
            border-radius: 3px;
            border: none;
            color: white;
            background: #FD5056;
        }
        .s-con{
            border-radius: 2px;
            width: 900px;
            height: 100%;
            margin:10px auto;
        }
        /*弹框样式*/
        .s-pt-p{
            margin-top: 20px;
            height: 50px;
            line-height: 50px;
            .s-p1-sp{
                display: inline-block;
                width: 100px;
                font-size: 18px;
                font-weight: bold;
                text-align: right;
                margin-left: 50px;
            }
            .s-p-in{
                height: 30px;
                border-radius: 2px;
                border: 1px solid #DCDFE6;
            }
            .el-textarea{
                width: 326px;
            }
        }
    }

</style>

